<template>
    <div id='order-index'>
        <h1 class="card-title">
            <span>收入</span>
        </h1>
        <div class="data-count loading-min-height">
            <loading v-if='loading_count' mode='full'></loading>
            <transition name='fade'>
                <div class='data-count-box' v-if='hasUserCount'>
                    <ul class="data-count__list">
                        <li class="data-count__item">
                            <span> {{ userCount.totalAmount | transform2fen }} </span>
                            <p>总收入</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.blackAmount | transform2fen }} </span>
                            <p>黑名单收入</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.contactsAmount | transform2fen }} </span>
                            <p>通讯录收入</p>
                        </li>
                    </ul>
                    <h1 class="card-title">
                        <span>订单</span>
                    </h1>
                    <ul class="data-count__list">
                        <li class="data-count__item">
                            <span> {{ userCount.totalCount }} </span>
                            <p>订单总数</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.blackcount }} </span>
                            <p>黑名单订单</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.contactsCount }} </span>
                            <p>通讯录订单</p>
                        </li>
                    </ul>
                    <ul class="data-count__list">
                        <li class="data-count__item">
                            <span> {{ userCount.payedCount }} </span>
                            <p><i class='paid'>已支付</i>订单总数</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.blackPayedCount }} </span>
                            <p><i class='paid'>已支付</i>黑名单订单</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.contactsPayedCount }} </span>
                            <p><i class='paid'>已支付</i>通讯录订单</p>
                        </li>
                    </ul>
                    <!-- <ul class="data-count__list">
                        <li class="data-count__item">
                            <span> {{ userCount.notHitCount }} </span>
                            <p><i class='paid'>未命中</i>黑名单订单</p>
                        </li>
                        <li class="data-count__item">
                            <span> {{ userCount.notHitBit }} </span>
                            <p><i class='paid'>未命中</i>黑名单订单率</p>
                        </li>
                    </ul> -->
                </div>
            </transition>
        </div>

        <div class="order-form form-table">
            <div class="form-content">
                <div class="form-item">
                    <span class="form-item__key">手机号</span>
                    <span class="form-item__value">
                        <input type="text" placeholder="请输入手机号" v-model='userPhone'>
                    </span>
                </div>
                <div class="form-item">
                    <span class="form-item__key">订单号</span>
                    <span class="form-item__value">
                        <input type="text" placeholder="请输入订单号" v-model='orderCode'>
                    </span>
                </div>
                <div class="form-item">
                    <span class="form-item__key">姓名</span>
                    <span class="form-item__value">
                        <input type="text" placeholder="请输入姓名" v-model='userName'>
                    </span>
                </div>
                <div class="form-item">
                    <span class="form-item__key">类型</span>
                    <span class="form-item__value">
                        <select-group v-model='orderType'>
                            <select-option value='' text='所有类型'></select-option>
                            <select-option value='1' text='黑名单'></select-option>
                            <select-option value='2' text='通讯录'></select-option>
                        </select-group>
                    </span>
                </div>
                <div class="form-item">
                    <span class="form-item__key">来源</span>
                    <span class="form-item__value">
                        <select-group v-model='source'>
                            <select-option value='' text='所有来源'></select-option>
                            <select-option value='1' text='征信查询'></select-option>
                            <select-option value='2' text='贷款管家'></select-option>
                            <select-option value='3' text='征信查查'></select-option>
                            <select-option value='4' text='信用专家'></select-option>
                            <select-option value='5' text='信用易贷'></select-option>
                            <select-option value='6' text='借钱管家'></select-option>
                        </select-group>
                    </span>
                </div>
                <div class="form-item">
                    <span class="form-item__key">状态</span>
                    <span class="form-item__value">
                        <select-group v-model='orderStatus'>
                            <select-option value='' text='所有订单'></select-option>
                            <select-option value='10' text='待支付'></select-option>
                            <select-option value='11' text='支付中'></select-option>
                            <select-option value='20' text='已支付'></select-option>
                            <select-option value='30' text='查询中'></select-option>
                            <select-option value='40' text='查询完成'></select-option>
                            <select-option value='0' text='自动关闭'></select-option>
                        </select-group>
                    </span>
                </div>
            </div>
            <div class="form-button">
                <span class="form-button__item button" @click='getList(1)'>搜索</span>
            </div>
        </div>

        <div class="loading-min-height">
            <transition name='fade'>
                <p class="no-data" v-if='noData'> 无订单数据 </p>
            </transition>
            <loading v-if='loading' mode='full'></loading>
            <transition name='fade'>
                <div class="table-list" v-if='records.length'>
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>订单号</th>
                                <th>手机号</th>
                                <th>类型</th>
                                <th>来源</th>
                                <th>金额</th>
                                <th>真实金额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='item in records'>
                                <td>{{ item.orderCode || placeholder }}</td>
                                <td>{{ item.user.userPhone || placeholder }}</td>
                                <td>{{ item.product.proName || placeholder }}</td>
                                <td>{{ item.packageId | transform2source }}</td>
                                <td>{{ item.orderAmount | transform2fen }}</td>
                                <td>{{ item.orderRealAmount | transform2fen }}</td>
                                <td>{{ item.orderStatusStr || placeholder }}</td>
                                <td>
                                    <div class='option-box'>
                                        <span class='option-button' @click='goDetail(item)'>查看详情</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <pagination
                        :current-page='currentPage'
                        :total-page='listInfo.totalPage'
                        @pageChange='getList'></pagination>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination
        },
        filters:{
            transform2fen(money){
                if(money === 0) return 0
                else if(!money) return '--'
                else return (money/100).toFixed(2) + '元'
            },
            transform2source(packageId){
                if(packageId === 1) return '征信查询'
                if(packageId === 2) return '贷款管家'
                if(packageId === 3) return '征信查查'
                if(packageId === 4) return '信用专家'
                if(packageId === 5) return '信用易贷'
                if(packageId === 6) return '借钱管家'
            },
        },
        data() {
            return {
                placeholder:'--',
                userCount:'',
                orderStatus:{
                    value:'',
                    text:'所有订单'
                },
                orderType:{
                    value:'',
                    text:'所有类型'
                },
                source:{
                    value:'',
                    text:'所有来源'
                },
                noData:false,
                listInfo:{},
                records:[],
                userPhone:'',
                orderCode:'',
                userName:'',
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            goDetail(item){
                this.$router.push({
                    name:'order-detail',
                    params:{
                        id:item.orderId,
                    }
                })
            },
            getList(num){
                this.noData = false
                this.loading = true

                allApi.orderList({
                    pageIndex:num,
                    pageSize:10,
                    userPhone:this.userPhone,
                    proId:this.orderType.value,
                    packageId:this.source.value,
                    orderCode:this.orderCode,
                    orderStatus:this.orderStatus.value,
                    userName:this.userName,
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.records.length) this.noData = false
                    else this.noData = true
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.orderCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){
            this.getAccount()
            this.getList(1)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #order-index{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
        .no-data{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
        }
    }
</style>
